<template>
  <div>
    <div>这是用户管理的页面~</div>
    <p></p>
    <button v-on:click="getAllUsers">获取所有用户</button>
    <div v-for="student in students" v-bind:key = student.id>
      {{student}}
    </div>
    <p></p>
    <div>
      请输入要查询用户信息的id：
      <input v-model="queryId">
    </div>
    <button v-on:click="getUserById">通过id获取指定用户</button>
    <div>{{studentById}}</div>
    <p></p>
    <div>
      请输入要添加的用户信息：
      <div>
        studentName
        <input v-model="studentName">
      </div>
      <div>
        address
        <input v-model="address">
      </div>
    </div>
    <button v-on:click="addUser">添加用户</button>
    <p></p>
    <div>
      请输入要修改的用户信息：
      <div>
        id
        <input v-model="id">
      </div>
      <div>
        studentName
        <input v-model="studentName">
      </div>
      <div>
        address
        <input v-model="address">
      </div>
    </div>
    <button v-on:click="updateUser">修改用户</button>
    <p></p>
    <div>
      请输入删除用户的id：
      <input v-model = "deleteId">
      <div>
        <button v-on:click="deleteUser">删除用户</button>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "StudentPage",
  data(){
    return{
      students: null,
      queryId: null,
      studentById: null,
      studentName: null,
      address: null,
      id: null,
      deleteId: null
    }
  },
  methods: {
    getAllUsers(){
      axios.get("http://localhost:8081/AllStudents")
          .then(resp => {
            console.log(resp);
            this.students = resp.data;
          })
    },
    getUserById(){
      axios.get(`http://localhost:8081/student/${this.queryId}`)
          .then(resp => {
            console.log(resp);
            this.studentById = resp.data;
          })
    },
    addUser(){
      axios.post("http://localhost:8081/student",
          {
            studentName: this.studentName,
            address: this.address
          }).then(resp => {
        console.log(resp);
      })
    },
    updateUser(){
      axios.put("http://localhost:8081/student",{
        id: this.id,
        studentName: this.studentName,
        address: this.address
      }).then( resp => {
        console.log(resp);
      })
    },
    deleteUser(){
      axios.delete("http://localhost:8081/student", {
        params: {
          id: this.deleteId
        }
      }).then(resp => {
        console.log(resp);
      })
    }
  }
}
</script>
<style scoped>
</style>
